<div class="wrap" id="html5av-widget">
    <input id="html5avmanagerid"
           name="html5avmanagerid"
           type="hidden"
           value="<?php echo $videoAudioID ?>" />
    <div id="html5av-widget-current-av" style="display: none;" >
        <p>Currently has <strong id="html5av-widget-current-av-type"></strong>
            attached, title: <strong id="html5av-widget-current-av-title"></strong>
            created: <strong id="html5av-widget-current-av-created"></strong>
            modified: <strong id="html5av-widget-current-av-modified"></strong></p>
        <input class="html5av-widget-button"
               type="submit" value="Edit Current AV"
               onclick="javascript:html5avWidgetEdit()"/>
        <input class="html5av-widget-button"
               type="submit" value="Disconnect Current AV"
               onclick="javascript:html5avDisconnectAV()"/>
    </div>
    <p>Change or Add Video or Audio</p>
    <div id="html5av-widget-option" >
        <input class="html5av-widget-button"
               type="submit" value="Add New Video"
               onclick="javascript:html5avWidgetAddVideo()"/>
        <input class="html5av-widget-button"
               type="submit" value="Add New Audio" 
               onclick="javascript:html5avWidgetAddAudio()"/>
        <input class="html5av-widget-button"
               type="submit" value="Select Existing AV"
               onclick="javascript:html5avWidgetExistingAV()" />
    </div>
</div>

<div id="html5av-widget-add-video-dialog"></div>

<div id="html5av-widget-add-audio-dialog"></div>

<div id="html5av-widget-selector-dialog"></div>

<div id="html5av-widget-editor-dialog"></div>

<script type="text/javascript">
    var html5av_api = '<?php echo html5av_manager::getApiURL(); ?>';
    var html5av_widget_attached_id;
    
    function html5avDisconnectAV() {
        if(confirm('Are you sure?')) {
            jQuery('#html5avmanagerid').val('');
            html5avWidgetCheck();
        }
    }
    
    function html5avWidgetExistingAV() {
        var post = {
            action: 'html5av_manager',
            node:'select_av'
        }
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#html5av-widget-selector-dialog').html(data);
            jQuery('#html5av-widget-selector-dialog').dialog('open');
        });
    }
    
    function html5avWidgetEdit() {
        var post = {
            action: 'html5av_manager',
            node:'get_media_editor',
            avid:html5av_widget_attached_id
        }
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#html5av-widget-editor-dialog').html(data);
            jQuery('#html5av-widget-editor-dialog').dialog('open');
        });
    }
    
    function html5avWidgetAddVideo() {
        var post = {
            action: 'html5av_manager',
            node:'add_video'
        }
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#html5av-widget-add-video-dialog').html(data);
            jQuery('#html5av-widget-add-video-dialog').dialog('open');
        });
    }
    
    function html5avWidgetAddAudio() {
        var post = {
            action: 'html5av_manager',
            node:'add_audio'
        }
        jQuery.post(ajaxurl, post, function(data) {
            jQuery('#html5av-widget-add-audio-dialog').html(data);
            jQuery('#html5av-widget-add-audio-dialog').dialog('open');
        });
    }
    
    function html5avWidgetCheck() {
        var id = jQuery('#html5avmanagerid').val();
        if(id != '') {
            html5av_widget_attached_id = id;
            var post = {
                action: 'html5av_manager',
                node:'get_av_info',
                avid:html5av_widget_attached_id
            }
            jQuery.getJSON(ajaxurl, post, function(json) {
                jQuery('#html5av-widget-current-av-type').text(json.type);
                jQuery('#html5av-widget-current-av-title').text(json.title);
                jQuery('#html5av-widget-current-av-created').text(json.created);
                jQuery('#html5av-widget-current-av-modified').text(json.modified);
                jQuery('#html5av-widget-current-av').css('display','block');
            });
        } else {
            html5av_widget_attached_id = '';
            jQuery('#html5av-widget-current-av').css('display','none');
        }
    }
    
    html5avWidgetCheck();
    
    jQuery(function($) {
        $('.html5av-widget-button').click(function() {
            return false;
        });
        
        $('#html5av-widget-add-video-dialog').dialog({
            autoOpen: false,
            width: 800,
            height: 600,
            minWidth: 800,
            minHeight: 600,
            modal: true
        });
        
        $('#html5av-widget-add-audio-dialog').dialog({
            autoOpen: false,
            width: 800,
            height: 600,
            minWidth: 800,
            minHeight: 600,
            modal: true
        });
        
        $('#html5av-widget-selector-dialog').dialog({
            autoOpen: false,
            width: 800,
            height: 600,
            minWidth: 800,
            minHeight: 600,
            modal: true
        });
        
        $('#html5av-widget-editor-dialog').dialog({
            autoOpen: false,
            width: 800,
            height: 600,
            minWidth: 800,
            minHeight: 600,
            modal: true
        });
    });
</script>